<template>
  <page-container :title="false">
    <div class="store-wrap" slot="content">
      <store-info-item :storeInfo="storeInfo" />
    </div>
    <a-card :bordered="false" style="margin-top: 24px">
      <stat-info :statInfo="statInfo" />
    </a-card>
    <a-card :bordered="false" style="margin-top: 24px">
      <div class="ant-descriptions-title">单量统计</div>
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :sm="24" :md="10" :lg="8" :xl="6" :xxl="5">
              <a-form-item>
                <a-range-picker @change="onChange" v-model="dataRange">
                  <a-icon slot="suffixIcon" type="calendar" />
                </a-range-picker>
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" @click="getOrderStat" icon="search">查询</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <a-row>
        <a-col :span="3" class="text-center">
          <a-statistic title="总金额" :value="orderStat.order_money" />
        </a-col>
        <a-col :span="3" class="text-center">
          <a-statistic title="总单量" :value="orderStat.order_count" />
        </a-col>
        <template v-if="$route.query.type === 'clothes'">
          <a-col :span="3" class="text-center">
            <a-statistic title="衣服总件数" :value="orderStat.clothes_num" />
          </a-col>
          <a-col :span="3" class="text-center">
            <a-statistic title="洗衣总金额" :value="orderStat.clothes_price" />
          </a-col>
          <a-col :span="3" class="text-center">
            <a-statistic title="总加急费" :value="orderStat.urgent_price" />
          </a-col>
          <a-col :span="3" class="text-center">
            <a-statistic title="总快递费" :value="orderStat.express_price" />
          </a-col>
          <a-col :span="3" class="text-center">
            <a-statistic title="总保价费" :value="orderStat.protect_price" />
          </a-col>
          <a-col :span="3" class="text-center">
            <a-statistic title="总包装费" :value="orderStat.pack_price" />
          </a-col>
        </template>
      </a-row>
    </a-card>
    <a-card :bordered="false" style="margin-top: 24px">
      <div class="ant-descriptions-title">订单列表</div>
      <div class="table-page-search-wrapper">
        <a-form layout="inline" :form="orderForm">
          <a-row :gutter="24">
            <a-col :md="7" :sm="24" :xl="6" :xxl="5">
              <a-form-item>
                <a-range-picker v-model="orderDateRange">
                  <a-icon slot="suffixIcon" type="calendar" />
                </a-range-picker>
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24">
              <a-form-item>
                <a-input placeholder="请输入订单编号" v-model="queryParam.search" />
              </a-form-item>
            </a-col>
             <a-col :md="4" :sm="24">
              <a-form-item>
                <a-select placeholder="线上/线下" v-model="queryParam.is_offline" allowClear>
                  <a-select-option :value="0">线上</a-select-option>
                   <a-select-option :value="1">线下</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
             <a-col :md="4" :sm="24">
              <a-form-item>
                <a-select placeholder="订单状态" v-model="queryParam.is_take" allowClear>
                  <a-select-option :value="key" v-for='(item,key) in isTakeList' :key='key' v-if='key > 2'>{{ item }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" @click="$refs.orderTable.handleSearch(true)" icon="search">查询</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <clothes-order-table :data="getStoreDetail" ref="orderTable" v-if="$route.query.type === 'clothes'" />
      <service-order-table :data="getStoreDetail" ref="orderTable" v-else />
    </a-card>
    <div style="margin-top: 24px">
      <store-clerk-stat-table :data="storeClerkList" :type="$route.query.type" />
    </div>
  </page-container>
</template>

<script>
import { storeInfo } from '@/api/store'
import { storeDetail, storeClerkList, orderStat } from '@/api/stat'
import orderStatus,{ IS_TAKE } from '@/mixins/orderStatus'
import StoreInfoItem from '@/components/StoreInfoItem'
import StoreClerkStatTable from './modules/StoreClerkStatTable'
import StatInfo from '@/components/stat-info/stat-info'
import STable from '@/components/Table'
import clothesOrderTable from '@/components/clothesOrderTable'
import ServiceOrderTable from '@/components/serviceOrderTable/serviceOrderTable'
import moment from 'moment'
const columns = [
  {
    title: '名称',
    dataIndex: 'name'
  },
  {
    title: '收益金额',
    dataIndex: 'price',
    customRender (text) {
      return '￥' + text
    }
  },
  {
    title: '收益类型',
    dataIndex: 'type'
  },
  {
    title: '电话',
    dataIndex: 'mobile'
  },
  {
    title: '支付方式',
    dataIndex: 'pay_type',
    scopedSlots: { customRender: 'pay_type' }
  },
  {
    title: '订单编号',
    dataIndex: 'out_trade_no'
  },
  {
    title: '时间',
    dataIndex: 'ctime'
  }
]

export default {
  name: 'StoreStat',
  components: {
    StoreInfoItem,
    StatInfo,
    STable,
    clothesOrderTable,
    ServiceOrderTable,
    StoreClerkStatTable
  },
  mixins: [orderStatus],
  data () {
    this.columns = columns
    return {
      queryParam: {
        search: '',
        atime: '',
        etime: '',
        type: 0
      },
      orderStatParams: {},
      storeClerkList,
      orderDateRange: [],
      earningList: [],
      storeInfo: {},
      statInfo: {},
      orderStat: {},
      dataRange: [],
      isTakeList:IS_TAKE,
      orderForm: this.$form.createForm(this)
    }
  },
  created () {
    this.getStoreInfo()
    this.getOrderStat()
  },
  methods: {
    onChange (date, dateString) {
      this.orderStatParams.atime = dateString[0]
      this.orderStatParams.etime = dateString[1]
    },
    getOrderStat () {
      const params = this.getRouteQueryParmas()
      orderStat(Object.assign({}, this.orderStatParams, params)).then(res => {
        this.onChange(undefined, [res.data.atime, res.data.etime])
        this.dataRange = [moment(res.data.atime), moment(res.data.etime)]
        this.orderStat = res.data
      })
    },
    getStoreInfo () {
      const params = this.$route.query
      storeInfo(params).then(res => {
        this.storeInfo = res.data
      })
    },
    getRouteQueryParmas () {
      const params = {
        store_id: this.$route.query.id,
        store_type: this.$route.query.type
      }
      return params
    },
    getStoreDetail (parameter) {
      const [atime, etime] = this.orderDateRange
      const requestParameters = {
        ...this.queryParam,
        atime: atime && atime.format('YYYY-MM-DD'),
        etime: etime && etime.format('YYYY-MM-DD'),
      }
      const params = this.getRouteQueryParmas()
      console.log('获取门店概况-----------------')
      return storeDetail(Object.assign({}, parameter, params, requestParameters)).then(res => {
        this.statInfo = res.data.stat
        return res.data
      })
    },
    handleEdit (record) {
      this.$router.push({
        name: 'clothesOrderDetail',
        query: {
          id: record.id
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.text-center {
  text-align: center;
}
</style>
